<template>
	<view>
		<u-navbar :title="title" @rightClick="rightClick" :autoBack="false" :bgColor="bgColor"
			:placeholder="placeholder">
			<view class="u-nav-slot" :class="{'u-nav-slot-pill':type == 'pill'}" slot="left">
				<template v-if="type == 'default'">
					<u-icon name="arrow-left" size="40rpx" @tap.stop="toBack" color="#000" :bold="true"></u-icon>
				</template>
				
				<template v-if="type == 'pill'">
					<u-icon name="arrow-left" color="#000000"  size="19" @tap.stop="toBack"></u-icon>
					<image @click="toHome()" class="to-home-img" src="https://saas-v5.oss-cn-guangzhou.aliyuncs.com/saas-admin/druid/mpimg/to-home-icon.png" mode=""></image>
				</template>
				
			</view>
			<view class="" slot="center">
				{{title}}
			</view>
		</u-navbar>
	</view>
</template>

<script>
	import {
		customRef
	} from "vue";
	export default {
		name: "navbar",
		props: {
			title: {
				type: String,
				default: ''
			},
			placeholder: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			
			customBack:{
				type:Boolean,
				default:false
			},
			type:{
				type:String,
				default:'default'
			}

		},
		data() {
			return {

			};
		},
		mounted() {
			// console.log(this.$slots);
		},
		methods: {
			toBack() {
				if (this.customBack) {
					this.$emit('back')
				} else {
					if (getCurrentPages().length > 1) {
						uni.navigateBack()
					} else {
						uni.switchTab({
							url: '/pages/home/index'
						})
					}
				}

			},
			toHome() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-nav-slot {
		display: flex;
		width: 168rpx;
		height: 62rpx;
		justify-content: space-between;
		align-items: center;
		opacity: 1;
		padding: 0 26rpx;
		box-sizing: border-box;
		&-pill{
			background: rgba(255, 255, 255, 0.5);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			border: 1rpx solid #dedbde;
			border-width: 0.5px;
		}
	}
	.to-home-img{
		width: 35rpx;
		height: 34rpx;
	}
</style>